<template>
  <div class="">
    <el-button type="primary" :disabled="disabled" @click="handleStartCountDown">
      {{ content }}
    </el-button>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      disabled: false,
      content: '获取验证码'
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {
    handleStartCountDown() {
      this.countDown()
    },
    countDown(count = 60) {
      this.disabled = true
      count -= 1
      this.content = `${count}秒后重试`
      const intervalId = setInterval(() => {
        count -= 1
        this.content = `${count}秒后重试`
        if (count <= 0) {
          clearInterval(intervalId)
          this.disabled = false
          this.content = '重新发送'
        }
      }, 1000)
    }
  }
}
</script>
<style scoped lang='scss'>
/* @import url(); 引入公共css类 */

</style>
